<template>
  <div class="container">
    <div class="top-div">
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        工作单位
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input1" placeholder="请输入工作单位" style="width: 120px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        自然人姓名
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input2" placeholder="请输入自然人姓名" style="width: 120px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        证件号码
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input3" placeholder="请输入证件号码" style="width: 120px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        行政职务
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input4" placeholder="请输入行政职务" style="width: 120px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        职级
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input5" placeholder="请输入职级" style="width: 160px;"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="searchCases">搜索</el-button>
      <el-button icon="el-icon-refresh" style="margin-left: 10px;" @click="resetTable"></el-button>
    </div>
    <el-table
        :data="tableData" style="width: 100%;height: calc(100vh - 165px);overflow-y: auto;">
      <el-table-column label="工作单位" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;color: #409EFF;">{{ scope.row.userorg }}</span>
        </template>
      </el-table-column>
      <el-table-column label="自然人姓名" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值" align="center" prop="risk" sortable>
        <template slot-scope="scope">
          <div  v-if="scope.row.difference>0">
            <div style="float: left;padding-left: 50px;margin-top: 10px">
              <span style="margin-left: 10px;">{{ scope.row.risk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-left: 5px;margin-top: 10px;">
              <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">+{{ scope.row.difference }}</span>
            </div>
          </div>
          <div  v-else-if="scope.row.difference == 0">
            <div style="float: left;padding-left: 50px;margin-bottom: 10px">
              <span style="margin-left: 10px;">{{ scope.row.risk }}</span>
            </div>
          </div>
          <div  v-else>
            <div style="float: left;padding-left: 50px;margin-bottom: 10px">
              <span style="margin-left: 10px;">{{ scope.row.risk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-left: 5px;margin-bottom: 10px;">
              <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{ scope.row.difference }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证件号码" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行政职务" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userzw }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职级" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.userzj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.usersex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.usertelephone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;color: #409EFF;cursor:pointer;" @click="showDetail()">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px auto;width: 500px;">
      <el-pagination background
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";

export default {
  mounted() {
    this.addLog()

    this.initTable()
  },
  computed: {},
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],
      sourceTableData: []
    }
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '人员风险数据'
      obj.content = '查看了【人员风险数据】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initTable();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    formattedFeatures(tableFeatures) {
      return tableFeatures.map(feature => feature + '<br>').toString().replaceAll("[", "")
          .replaceAll("]", "")
          .replaceAll(",", "")
          .replaceAll("\"", "");
    },
    showDetail() {
      window.open('http://156.0.38.200:9093/userWarning/detail/1/NDMwMjAwMTk3MDA3MDIxMjEx/true', '_blank', `width=800, height=600`);
    },
    initTable() {
      var data = require('@/assets/data4.json')
      this.tableData = data
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    resetTable() {
      var data = require('@/assets/data4.json')
      this.tableData = data
      this.total = this.tableData.length
      this.pageSize = 10
      this.currentPage = 1
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    searchCases() {
      if (this.input1) {
        this.tableData = this.tableData.filter(item => item.userorg.includes(this.input1));
      }

      if (this.input2) {
        this.tableData = this.tableData.filter(item => item.username.includes(this.input2));
      }

      if (this.input3) {
        this.tableData = this.tableData.filter(item => item.userid.includes(this.input3));
      }

      if (this.input4) {
        this.tableData = this.tableData.filter(item => item.userzw.includes(this.input4));
      }
      if (this.input5) {
        this.tableData = this.tableData.filter(item => item.userzj.includes(this.input5));
      }
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    }
  }
};
</script>
<style scoped>
.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  min-width: 1200px;
  height: 50px;
  padding: 10px;
}

.el-input{
  font-size: 13px;
}

.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}


</style>